<template>
<div>
  <div class="tabNav">
    <router-link to="/index">
      <img src="../assets/img/sidebar1.png" />首页
    </router-link>
    <b>/<img src="../assets/img/personal.png" />个体户列表</b>
  </div>
    <div class="task-box">
      <div class="nav">
        <div class="nav-item" @click="getTableData(index)" v-for="(item, index) in navArr" :key="index" :class="[index == activeNav ? 'active' : '']">
          <span>{{ item }}</span>
          <div class="back"></div>
          <div class="back-active"></div>
        </div>
        <div class="animate-border" :style="{'left': 'calc('+ activeNav*150 +'px + 55px)'}"></div>
      </div>
    </div>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd table-drop" shadow="hover">
                <div class="search">
                  <el-input v-model="input" placeholder="id/姓名/手机号/身份证号"></el-input>
                  <el-button type="primary" @click="getTableData(activeNav)">查询</el-button>
                </div>
                <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%"
                ref="multipleTable"
                @sort-change="sortChange"
                >
                <el-table-column prop="id" sortable="custom" align="center" label="ID" width="70"> </el-table-column>
                <el-table-column
                    prop="selfBusinessName"
                    sortable="custom"
                    align="center"
                    label="企业名称"
                    min-width="160"
                >
                </el-table-column>
                <el-table-column prop="legalName" sortable="custom" min-width="100" align="center" label="经营者">
                </el-table-column>
                <el-table-column prop="username" align="center" sortable="custom" label="用户登录名" width="120">
                </el-table-column>
                <el-table-column prop="socialCreditCode" sortable="custom" min-width="160" align="center" label="社会统一信用代码">
                </el-table-column>
                <el-table-column prop="legalPhone" align="center" sortable="custom" label="手机号" width="120">
                </el-table-column>
                <el-table-column prop="subFeeNum" align="center" sortable="custom" label="服务款总额" min-width="120">
                </el-table-column>
                <el-table-column prop="billAmountNum" align="center" sortable="custom" min-width="120" label="已开票金额">
                </el-table-column>
                <el-table-column prop="openTime" min-width="160" sortable="custom" align="center" label="个体商户注册日期">
                    <template #default="item">
                      <template v-if="item.row.openTime == null">-</template>
                      <template v-else>{{ format('yyyy-MM-dd', new Date(item.row.openTime)) }}</template>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" align="center" label="授权委托书" width="120">
                  <template #default="item">
                    <span v-if="item.row.agreementUrl == null">-</span>
                    <el-button v-else class="open-crm" type="text" @click="openUrl(item.row.agreementUrl)">查看</el-button>
                    <span v-if="item.row.redoStatus&2">(需更新)</span>
                  </template>
                </el-table-column>
                <el-table-column prop="phone" align="center" label="平台协议书" width="120">
                  <template #default="item">
                    <span v-if="item.row.platformUrl == null">-</span>
                    <el-button v-else class="open-crm" type="text" @click="openUrl(item.row.platformUrl)">查看</el-button>
                    <span v-if="item.row.redoStatus&1">(需更新)</span>
                  </template>
                </el-table-column>
                <el-table-column prop="phone" align="center" label="意愿视频" width="120">
                  <template #default="item">
                    <template v-if="linggonginfo.showWishVideo == 1">
                      <span v-if="item.row.wishVideoUrl == null">-</span>
                      <el-button v-else class="open-crm" type="text" @click="openVideo(item.row.wishVideoUrl)">查看</el-button>
                      <span v-if="item.row.redoStatus&4">(需更新)</span>
                    </template>
                    <template v-else>-</template>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="caozuo"
                    label="操作"
                    width="430"
                    class-name="editor"
                >
                  <template #default="item">
                    <router-link :to="{ path: '/personManageDel', query: { id: item.row.id } }">
                      <el-button type="text">详情</el-button>
                    </router-link>
                    <el-button type="text" @click="againAgreementAlert(item.row)">重新签署协议</el-button>
                    <template v-if="linggonginfo.showWishVideo == 1">
                      <el-button type="text" v-if="item.row.redoStatus&4" @click="againAgreement(item.row.sevicerId, -4)">取消重新录制意愿视频</el-button>
                      <el-button type="text" v-else @click="againAgreement(item.row.sevicerId, 4)">重新录制意愿视频</el-button>
                    </template>
                    <el-button type="text" v-if="item.row.redoStatus&8" @click="againAgreement(item.row.sevicerId, -8)">取消重新上传身份证</el-button>
                    <el-button type="text" v-else @click="againAgreement(item.row.sevicerId, 8)">重新上传身份证</el-button>
                  </template>
                </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="arrPage"
                :page-size="selectPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination>
            </el-card>
        </el-col>
    </el-row>
    <el-dialog
      title="签署协议"
      v-model="againAgreementVisible"
      width="420px">
        <div class="againAgreement-box">
          <button class="againAgreement-button" v-if="selfMode == 1" @click="againAgreement(serviceId, agreementStatus)" type="button">{{agreementText}}</button>
          <button class="againAgreement-button" @click="againAgreement(serviceId, platformStatus)" type="button">{{platformText}}</button>
        </div>
    </el-dialog>
</div>  
</template>
<script>
export default {
  props: ['search'],
  data() {
    return {
      navArr: ['全部', '未注销', '已注销'],
      activeNav: 0,
      selfMode: 1,
      linggonginfo: JSON.parse(localStorage.getItem("linggong_info")),
      serviceId: 0,
      agreementText: "重新签署授权书",
      agreementStatus: 2,
      platformText: "重新签署平台协议书",
      platformStatus: 1,
      againAgreementVisible: false,
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      value: '',
      tableData: [],
      checkboxSelect: 0,
      input: '',
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
			dwonloadList: [] // 选中的数据
    };
  },
  created() {
    this.getTableData(this.activeNav);
  },
  methods: {
    getTableData(index) {
      if (this.activeNav != index) {
          this.orderByColume = 'createTime'
      }
      this.activeNav = index;
      // 获取列表信息
      this.$http({
        url: "/api/quick/oem/selfBusiness/getSelfList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          cancelStatus: index,
          mixedStr: this.input,
          selfBusinessId: 0,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    openVideo(url) {
      // 查看视频
      this.$alert('<video width="400" controls height="300" src="' + url +'"></video>', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        center: true,
        customClass: "seeVideo"
      })
    },
    openUrl(url) {
      // 打开新窗口查看pdf
      this.$http({
        url: "/api/quick/server/consumer/pdfPreView",
        method: "post",
        params: {
          ossPath: url
        },
        responseType: 'blob'
      }).then((data) => {
        const blob = new Blob([data]);
        const href = window.URL.createObjectURL(blob)
        window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(href))
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData(this.activeNav);
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableData(this.activeNav);
    },
    handleSelectionChange() {},
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        let name = d.prop
        if(d.prop == 'selfBusinessName' || d.prop == 'legalName') {
          orderByZH = true
          name = 'sb.' + d.prop
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = name
      }
      this.getTableData(this.activeNav)
    },
    againAgreementAlert(d) {
      // 重新签署协议
      if(d.redoStatus&2) {
        this.agreementText = '取消重新签署授权书'
        this.agreementStatus = -2
      }
      if(d.redoStatus&1) {
        this.platformText = '取消重新签署平台协议书'
        this.platformStatus = -1
      }
      this.serviceId = d.sevicerId
      this.selfMode = d.selfMode
      this.againAgreementVisible = true
    },
    againAgreement(id, status) {
      // 更改意愿视频 协议状态 是否需要更新
      this.$http({
        url: "/api/quick/server/consumer/updateRedoStatus",
        method: "post",
        params: {
          id: id,
          redoStatus: status
        },
      }).then((data) => {
        if(data.code == 0) {
          this.$message.success("操作成功")
          this.againAgreementVisible = false
          this.getTableData(this.activeNav)
        }
      });
    }
  },
};
</script>
<style>
.cardTits .el-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: 0;
}
</style>
<style lang="scss" scoped>
.againAgreement-box {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  .againAgreement-button {
    padding: 8px 16px;
    background-color: #326CF0;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
  }
}
.task-box {
  .nav {
    background-color: #e1e9f2;
    color: #6c8198;
    overflow: hidden;
    width: 450px;
    position: relative;
    .animate-border {
      width: 40px;
      height: 3px;
      background-color: #326CF0;
      border-radius: 2px;
      position: absolute;
      z-index: 4;
      bottom: 2px;
      transition: left .5s;
      left: 60px;
    }
    .nav-item {
      width: 150px;
      height: 40px;
      text-align: center;
      position: relative;
      line-height: 40px;
      float: left;
      cursor: pointer;
      font-size: 14px;
      span {
        z-index: 2;
        position: relative;
      }
      .back {
        transform: skew(20deg);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
        background-color: #FFFFFF;
        border-radius: 2px;
      }
    }
    .nav-item.active:first-child {
      .back-active {
        background-color: #FFFFFF;
        width: 70px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .nav-item.active:nth-last-child(2) {
      .back-active {
        background-color: #FFFFFF;
        width: 70px;
        height: 40px;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .nav-item.active {
      span {
        color: #326CF0;
      }
      .back {
        z-index: 1;
      }
    }
  }
}
</style>
